<div style="padding: 5px;" class="scheduled-event">

    <div class="toolSet">
        <div class="buttonSet">
            <div class="table-buttons-left">
                <!-- <div class="operate" (click)="addOrEdit('add')" *ngIf='accessButton?.Create'><i
                        class="iconfont icon-add"></i>{{'TrafficManagement.IncidentRecord.Create' | translate}}</div>
                <div class="operate" (click)="addOrEdit('edit')" *ngIf='accessButton?.Edit'><i
                        class="iconfont icon-pen01"></i>{{'TrafficManagement.IncidentRecord.Edit' | translate}}</div>
                <div class="left-button-last" (click)="refresh()"><i class="iconfont icon-refresh1"></i></div> -->

                <button class="op-btn" nz-button nzType="primary" (click)="addOrEdit('add')" *ngIf='accessButton?.Create'>
                    <!-- <i nz-icon nzType="plus" nzTheme="outline"></i> -->
                    <svg t="1649734574121" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4498" width="20" height="20"><path d="M512 958.016611c-119.648434 0-232.1288-46.367961-316.736783-130.559656-84.640667-84.255342-131.263217-196.255772-131.263217-315.455235 0-119.168499 46.624271-231.199892 131.232254-315.424271 84.607983-84.191695 197.088348-130.559656 316.736783-130.559656s232.1288 46.367961 316.704099 130.559656c84.67163 84.224378 131.263217 196.255772 131.263217 315.391587 0.032684 119.199462-46.591587 231.232576-131.263217 315.455235C744.1288 911.615966 631.648434 958.016611 512 958.016611zM512 129.983389c-102.623626 0-199.071738 39.743475-271.583282 111.936783-72.480581 72.12794-112.416718 168.063432-112.416718 270.079828s39.903454 197.951888 112.384034 270.047144c72.511544 72.191587 168.959656 111.936783 271.583282 111.936783 102.592662 0 199.071738-39.743475 271.583282-111.936783 72.480581-72.160624 112.416718-168.063432 112.384034-270.079828 0-102.016396-39.903454-197.919204-112.384034-270.016181C711.071738 169.759548 614.592662 129.983389 512 129.983389z" p-id="4499" fill="#ffffff"></path><path d="M736.00086 480.00086 544.00086 480.00086 544.00086 288.00086c0-17.664722-14.336138-32.00086-32.00086-32.00086s-32.00086 14.336138-32.00086 32.00086l0 192L288.00086 480.00086c-17.664722 0-32.00086 14.336138-32.00086 32.00086s14.336138 32.00086 32.00086 32.00086l192 0 0 192c0 17.695686 14.336138 32.00086 32.00086 32.00086s32.00086-14.303454 32.00086-32.00086L544.00258 544.00086l192 0c17.695686 0 32.00086-14.336138 32.00086-32.00086S753.696546 480.00086 736.00086 480.00086z" p-id="4500" fill="#ffffff"></path></svg>

                    {{'TrafficManagement.IncidentRecord.Create' | translate}}
                </button>
                <button class="op-btn" nz-button nzType="primary" (click)="addOrEdit('edit')" *ngIf='accessButton?.Edit'>
                    <!-- <i nz-icon nzType="edit" nzTheme="outline"></i> -->
                    <svg t="1649741351323" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5424" width="20" height="20"><path d="M521.152 393.408l319.936-320 45.248 45.312-320 320z" fill="#ffffff" p-id="5425"></path><path d="M896 960H64V64h448v64H128v768h704V448h64v512z" fill="#ffffff" p-id="5426"></path></svg>
                    {{'TrafficManagement.IncidentRecord.Edit' | translate}}</button>
                <button nz-button nzType="primary" (click)="refresh()" nzShape="circle"><i nz-icon nzType="reload" nzTheme="outline"></i></button>
            </div>
        </div>
        <div class="toolSet">
            <div class="toolSetLeft">
                <!--<p>Period:-->
                <!--<nz-range-picker nzSize="default" style="margin-left: 0.1rem"></nz-range-picker>-->
                <!--</p>-->
            </div>
            <div class="toolSetRight">
                <div class="equipmet_toolbar">
                    <!-- <i class="iconfont icon-youjian"></i> -->
                    <itmp-toolbar [toolbarList]="toolbarList" [tableHeader]="renderHeader" eventType="incident-position" [accessButton]='accessButton'
                        [selectData]="selectedItem" exportName="IncidentRecordList" [searchData]="queryData.condition">
                    </itmp-toolbar>
                </div>
            </div>
        </div>
    </div>
    <nz-table id="nzTable" #basicTable [nzShowPagination]="false" [nzData]="listOfData" [nzFrontPagination]="false">
        <thead *ngIf="showTable">
            <tr>
                <ng-container *ngFor="let item of renderHeader">
                    <ng-container *ngIf="item.isChecked">
                        <th *ngIf="item.name === 'ID' || item.name === 'Zone ID' || item.name === 'Road Name'"
                            class="listTitle">
                            <div>{{'TrafficManagement.IncidentRecord.'+item.value | translate}}</div>
                            <div class="no-print" style="padding-top: 0.1rem"><input nz-input placeholder=""
                                    [(ngModel)]="item.key" (ngModelChange)="filterSearch()" /></div>
                        </th>
                        <th *ngIf="item.name === 'Type'" class="listTitle">
                            <div>{{'TrafficManagement.IncidentRecord.'+item.value | translate}}</div>
                            <div class="no-print" style="padding-top: 0.1rem">
                                <nz-select style="width: 1rem" [(ngModel)]="irTypeSelect"
                                    (ngModelChange)='irTypeSearch()' [nzPlaceHolder]="'Share.All' | translate" nzShowSearch
                                    nzAllowClear  [nzDropdownMatchSelectWidth]="false">
                                    <nz-option *ngFor="let option of irType" [nzLabel]="'TrafficManagement.IncidentRecord.'+option.name|translate"
                                        [nzValue]="option.value"></nz-option>
                                </nz-select>
                            </div>
                        </th>
                        <th *ngIf="item.name === 'Source' || item.name === 'Status'" class="listTitle">
                            <div>{{'TrafficManagement.IncidentRecord.'+item.value | translate}}</div>
                            <div class="no-print" style="padding-top: 0.1rem">
                                <nz-select style="width: 1rem" [(ngModel)]="item.key" (ngModelChange)='irTypeSearch()'
                                    [nzPlaceHolder]="'Share.All' | translate" nzShowSearch nzAllowClear  [nzDropdownMatchSelectWidth]="false">
                                    <nz-option *ngFor="let option of item.selectList" [nzLabel]="'TrafficManagement.IncidentRecord.'+option.name| translate"
                                        [nzValue]="option.value" ></nz-option>
                                </nz-select>
                            </div>
                        </th>
                        
                        <th *ngIf="item.name === 'Start Date'" class="listTitle">
                            <div>{{'TrafficManagement.IncidentRecord.'+item.value | translate}}</div>
                            <div class="no-print" style="padding-top: 0.1rem">
                                <nz-range-picker nzSize="default" [(ngModel)]="dateRange"
                                (ngModelChange)="onChange($event)" [nzDisabledDate]="disabledDate">
                                </nz-range-picker>
                            </div>
                        </th>
                        <th *ngIf="item.name === 'Planned Time To Clear'" class="listTitle">
                            <div>{{'TrafficManagement.IncidentRecord.'+item.value | translate}}</div>
                            <div class="no-print" style="padding-top: 0.1rem">
                                <nz-range-picker nzSize="default" [(ngModel)]="clearDateRange"
                                (ngModelChange)="clearTimeOnChange($event)"  ></nz-range-picker>
                            </div>
                        </th>
                        <th *ngIf="item.name === 'Lane Blockage'" class="listTitle">
                            <div>{{'TrafficManagement.IncidentRecord.'+item.value | translate}}</div>
                            <div class="no-print" style="padding-top: 0.1rem;width: 1rem;height: 0.4rem;">
                            </div>
                        </th>
                    </ng-container>
                </ng-container>
            </tr>
        </thead>
        <tbody *ngIf="showTable">
            <tr *ngFor="let data of basicTable.data" (click)="showDetail(data)"
                [ngClass]="{'active':data.ir_ID == editingItem,'highLight':data.eTime < now||data.veri_State===4}">
                <td *ngIf="renderHeader[0].isChecked">{{ data.ir_ID }}</td>
                <td *ngIf="renderHeader[1].isChecked">{{ ('TrafficManagement.IncidentRecord.' + (typeList && typeList[data.type])) |translate}}</td>
                <td *ngIf="renderHeader[2].isChecked">{{ data.start_Time | date:'yyyy/MM/dd HH:mm' }}</td>
                <td *ngIf="renderHeader[3].isChecked">{{ data.eTime | date:'yyyy/MM/dd HH:mm' }}</td>
                <td *ngIf="renderHeader[4].isChecked">{{ data.zone_ID }}</td>
                <td *ngIf="renderHeader[5].isChecked">{{ data.road_Name }}</td>
                <td *ngIf="renderHeader[6].isChecked">
                    <ng-container *ngFor="let data of data.laneBlockage">
						<span *ngIf="laneBlockageObj[data]">
							<img class="img-lane" [src]="'../content/images/icons/' + laneBlockageObj[data]"
								style="width: 20px;">
                                
						</span>
					</ng-container>
                </td>
                <td *ngIf="renderHeader[7].isChecked">
                    {{ 'TrafficManagement.IncidentRecord.'+sourceList[data.source] |translate}}
                </td>
                <td *ngIf="renderHeader[8].isChecked">
                    {{ 'TrafficManagement.IncidentRecord.'+statusList[data.veri_State] |translate}}
                </td>
            </tr>
        </tbody>
        <tfoot class="incident-record-list-footer">
            <tr>
                <td [attr.colspan]="renderHeader.length+1" style="padding: 10px;">
                    <itmp-pagination [totalEle]="pagination.totalEle" [pageSize]="pagination.pageSize"
                        [pageNum]="pagination.currentPage" showCountInfo=true [count]="pagination.currentSize"
                        (pageNumChange)="onPageChange($event)" (pageSizeChange)="onSizeChange($event)">
                    </itmp-pagination>
                </td>
            </tr>
        </tfoot>
    </nz-table>
</div>
<!--
<ng-template #contentTemplate>
    <ul class="headerSelect">
        <li *ngFor="let item of renderHeader,let i=index">
            <input type="checkbox" [(checked)]="item.isChecked" (click)="renderHeadSelect(item,i)">
            {{item.name}}
        </li>
    </ul>
</ng-template>-->
